import React from "react";
import {Image, StyleSheet, Text, View} from "react-native";
import UploadFileComponent from "../uploader/UploadFileComponent";
import {FileInfo} from "../../libs/sdk/echatim/core/fileclient/FileServerClient";
import EHr from "./EHr";
import {Resource} from "../../resource/Resource";

type AvatarHeaderProp = {
    avatar:string,
    showEditAvatar?:boolean,
    headerFirstText?:string,
    headerSecondText?:string,
    onAvatarUpload?:(info:FileInfo)=>void
}

type AvatarHeaderState = {
    avatar:string,
    showEditAvatar:boolean
}

export default class AvatarHeader extends React.Component<AvatarHeaderProp, AvatarHeaderState> {
    constructor(props:AvatarHeaderProp) {
        super(props);
        this.state = {
            avatar: this.props.avatar,
            showEditAvatar: (!(this.props.showEditAvatar === undefined || this.props.showEditAvatar === false))
        }
    }

    private onAvatarUpload(info:FileInfo){
        this.setState({
            avatar: info.url
        });
        if(this.props.onAvatarUpload){
            this.props.onAvatarUpload(info);
        }
    }

    render() {
        return (
            <View>
                <EHr height={10}/>
                <View style={styles.container}>
                    <View style={styles.avatarContainer}>
                        <Image style={styles.avatar} source={this.state.avatar ? {uri:this.state.avatar} : Resource.demo_header}/>
                    </View>
                    <View style={styles.textContainer}>
                        {this.props.headerFirstText && <Text>{this.props.headerFirstText}</Text>}
                        {this.props.headerSecondText && <Text>{this.props.headerSecondText}</Text>}
                    </View>
                    <View style={styles.btnContainer}>
                        {this.state.showEditAvatar && <View style={{width:100, alignSelf:'flex-end'}}>
                            <UploadFileComponent onUploaded={(info)=>this.onAvatarUpload(info)}  />
                        </View>}
                    </View>
                </View>
            </View>
        );
    }
}


let styles = StyleSheet.create({
    container:{
        flexDirection:'row',
        marginTop:4,
        marginBottom:4,
        justifyContent:'flex-start'
    },

    avatarContainer:{
        flexDirection:'row',
        justifyContent:'space-between',
        marginLeft:20,
        marginRight:10,
        marginBottom:10
    },

    avatar:{
        width: 50,
        height:50,
        borderRadius:19.5
    },

    textContainer:{
        flexDirection:'column',
        justifyContent:'flex-start',
        marginTop:8
    },

    btnContainer:{
        flexDirection:'column',
        flex:1
    }
});

